<template>
  <div class="p20">
    <el-form :model="formData" ref="formData" :inline="true" label-position="top">
      <el-tabs type="border-card">
        <el-tab-pane label="输入框">
          <!-- <FInput v-model.trim="xxx" :maxlength="50" width="220px" icon="" :disabled="false" placeholder="请输入" append="" :autofocus="false" /> -->
          <el-form-item label="输入框" prop="input1">
            <FInput v-model.trim="formData.input1" />
          </el-form-item>
          <el-form-item label="icon">
            <FInput v-model.trim="formData.input2" icon="el-icon-search" />
          </el-form-item>
          <el-form-item label="文字后缀">
            <FInput v-model.trim="formData.input3" append=".com" />
          </el-form-item>
          <!-- <FInput v-model.trim="xxx" :password="true" :maxlength="50" width="220px" icon="" :disabled="false" placeholder="请输入" append="" :autofocus="false" /> -->
          <el-form-item label="密码框">
            <FInput v-model.trim="formData.password1" :password="true" />
          </el-form-item>
          <el-form-item label="icon">
            <FInput v-model.trim="formData.password2" :password="true" icon="el-icon-unlock" />
          </el-form-item>
          <br />
          <!-- <FInputAutocomplete v-model.trim="xxx" :options="[]" api="" :props="{value: 'value', other: 'other'}" :maxlength="50" width="220px" :disabled="false" placeholder="请输入" :autofocus="false" /> -->
          <el-form-item label="自动完成">
            <FInputAutocomplete v-model.trim="formData.inputAutocomplete1" :options="selectList" />
          </el-form-item>
          <el-form-item label="备选项显示更多">
            <FInputAutocomplete v-model.trim="formData.inputAutocomplete2" :options="selectListOther" />
          </el-form-item>
          <el-form-item label="远程数据">
            <FInputAutocomplete v-model.trim="formData.inputAutocomplete3" api="/xxx/xxx" />
          </el-form-item>
          <br />
          <!-- <FInputNumber v-model.trim="xxx" :controls="true" :min="" :max="" step="" precision="" width="220px" :disabled="false" placeholder="请输入" /> -->
          <el-form-item label="数字框">
            <FInputNumber v-model.trim="formData.number1" />
          </el-form-item>
          <el-form-item label="0-10">
            <FInputNumber v-model.trim="formData.number2" :min="0" :max="10" />
          </el-form-item>
          <el-form-item label="每次递增2">
            <FInputNumber v-model.trim="formData.number3" :step="2" />
          </el-form-item>
          <el-form-item label="小数点2位">
            <FInputNumber v-model.trim="formData.number4" :precision="2" />
          </el-form-item>
          <el-form-item label="无按钮">
            <FInputNumber v-model.trim="formData.number5" :controls="false" />
          </el-form-item>
          <br />
          <!-- <FTextarea v-model.trim="xxx" :maxlength="100" width="220px" minRows="3" :disabled="false" placeholder="请输入" resize="vertical" :autofocus="false" /> -->
          <el-form-item label="文本域">
            <FTextarea v-model.trim="formData.textarea1" />
          </el-form-item>
          <el-form-item label="禁止缩放">
            <FTextarea v-model.trim="formData.textarea2" resize="none" />
          </el-form-item>
          <el-form-item label="弹框型">
            <!-- <FTextareaDialog v-model.trim="xxx" :maxlength="100" width="220px" :disabled="false" placeholder="请输入" /> -->
            <FTextareaDialog v-model="formData.textarea3" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="选择框">
          <!-- <FSelect v-model.trim="xxx" @label="(v)=>{xxx=v}" :options="[]" api="" :props="{value: 'value', label: 'label'}" width="220px" :disabled="false" placeholder="请选择" multiple="" /> -->
          <el-form-item label="基础">
            <FSelect v-model="formData.select1" @label="(v)=>{formData.selectLabel1=v}" :options="selectList2" />
          </el-form-item>
          <el-form-item label="远程数据">
            <FSelect v-model="formData.select2" @label="(v)=>{formData.selectLabel2=v}" api="demo" />
          </el-form-item>
          <el-form-item label="多选-合并显示">
            <FSelect v-model="formData.select3" @label="(v)=>{formData.selectLabel3=v}" :options="selectList2"
              multiple="one" />
          </el-form-item>
          <el-form-item label="多选-全部显高度自适应">
            <FSelect v-model="formData.select4" @label="(v)=>{formData.selectLabel4=v}" :options="selectList2"
              multiple="all" />
          </el-form-item>
          <br />
          <!-- <FSelectCascader v-model.trim="xxx" @label="(v)=>{xxx=v}" :options="[]" api="" :props="{value: 'value', label: 'label', children: 'children'}" width="220px" :disabled="false" placeholder="请选择" :change-on-select="false" /> -->
          <el-form-item label="级联选择">
            <FSelectCascader v-model="formData.cascader1" @label="(v)=>{formData.cascaderLabel1=v}"
              :options="selectList3" />
          </el-form-item>
          <el-form-item label="远程数据">
            {{formData.cascader2}} {{formData.cascaderLabel2}}
            <FSelectCascader v-model="formData.cascader2" @label="(v)=>{formData.cascaderLabel2=v}" api="/xxx/xxx" />
          </el-form-item>
          <el-form-item label="动态加载次级选项">
            <FSelectCascader v-model="formData.cascader3" @label="(v)=>{formData.cascaderLabel3=v}" api="/xxx/xxx" :changeGetData="true" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="日期时间">
          <!-- <FDatePicker v-model.trim="xxx" type="date" format="" value-format="" width="220px" :disabled="false" placeholder="选择日期" /> -->
          <el-form-item label="基础">
            <FDatePicker v-model="formData.datePicker1" value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item label="年">
            <FDatePicker v-model="formData.datePicker2" type="year" value-format="yyyy" />
          </el-form-item>
          <el-form-item label="年月">
            <FDatePicker v-model="formData.datePicker3" type="month" value-format="yyyy-MM" />
          </el-form-item>
          <el-form-item label="年月日时分秒">
            <FDatePicker v-model="formData.datePicker4" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" />
          </el-form-item>
          <br />
          <el-form-item label="日期范围-年月">
            <FDatePicker v-model="formData.datePicker6" type="monthrange" value-format="yyyy-MM" />
          </el-form-item>
          <el-form-item label="日期范围-年月日">
            <FDatePicker v-model="formData.datePicker5" type="daterange" value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item label="日期范围-年月日时分秒">
            <FDatePicker v-model="formData.datePicker7" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="文件上传">
          <!-- <FUpload v-model.trim="xxx" urlName="" ：limit="{size:5,sizeType:'MB'}" accept="" prefix="" width="220px" :disabled="false" /> -->
          <el-form-item label="基础">
            <FUpload v-model="formData.uploadFile" />
          </el-form-item>
          <el-form-item label="限制格式">
            <FUpload v-model="formData.uploadFile" accept=".png,.jpg,.jpeg,.bmp,.gif" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="验证">
          <el-form-item label="必填" prop="input1" :rules="[V.required]">
            <FInput v-model.trim="formData.input1" />
          </el-form-item>
          <el-form-item label="必填无*号标识" prop="input1" :rules="[V.required]" class="no-required">
            <FInput v-model.trim="formData.input1" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <br />
      <el-button type="primary" @click="submit" :loading="loading">{{$t('button.OK')}}</el-button>
    </el-form>
  </div>
</template>

<script>
import FInput from '@/components/form/f-input'
import FInputAutocomplete from '@/components/form/f-input-autocomplete'
import FInputNumber from '@/components/form/f-input-number'
import FTextarea from '@/components/form/f-textarea'
import FTextareaDialog from '@/components/form/f-textarea-dialog'
import FSelect from '@/components/form/f-select'
import FSelectCascader from '@/components/form/f-select-cascader'
import FDatePicker from '@/components/form/f-date-picker'
import FUpload from '@/components/form/f-upload'
import V from '@/assets/scripts/validate'

export default {
  // 组件
  components: {
    FInput,
    FInputAutocomplete,
    FInputNumber,
    FTextarea,
    FTextareaDialog,
    FSelect,
    FSelectCascader,
    FDatePicker,
    FUpload
  },
  data() {
    return {
      V,
      loading: false,
      formData: {
        input1: null,
        input2: null,
        input3: null,
        password1: null,
        password2: null,
        inputAutocomplete1: null,
        inputAutocomplete2: null,
        inputAutocomplete3: null,
        number1: null,
        number2: null,
        number3: null,
        number4: null,
        number5: null,
        textarea1: null,
        textarea2: null,
        textarea3: null,
        select1: null,
        selectLabel1: null,
        select2: null,
        selectLabel2: null,
        select3: null,
        selectLabel3: null,
        select4: null,
        selectLabel4: null,
        cascader1: null,
        cascaderLabel1: null,
        cascader2: null,
        cascaderLabel2: null,
        cascader3: null,
        cascaderLabel3: null,
        datePicker1: null,
        datePicker2: null,
        datePicker3: null,
        datePicker4: null,
        datePicker5: null,
        datePicker6: null,
        datePicker7: null,
        uploadFile: null
      },
      selectList: [{
        value: '选项1'
      },
      {
        value: '选项2'
      }
      ],
      selectListOther: [{
        value: '选项1',
        other: '其他信息1'
      },
      {
        value: '选项2',
        other: '其他信息2'
      }
      ],
      selectList2: [{
        value: '1',
        label: '选项1'
      },
      {
        value: '2',
        label: '选项2'
      },
      {
        value: '3',
        label: '选项3'
      },
      {
        value: '4',
        label: '选项4'
      }
      ],
      selectList3: [{
        value: '1',
        label: '选项1',
        children: [{
          value: '11',
          label: '选项1-1'
        }, {
          value: '12',
          label: '选项1-2',
          children: [{
            value: '121',
            label: '选项1-2-1'
          }, {
            value: '122',
            label: '选项1-2-2'
          }]
        }]
      }]
    }
  },
  mounted() {},
  methods: {
    /**
     * 提交
     */
    submit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading = true
          this.loading = false
        }
      })
    }
  }
}
</script>
